<!-- 当前模块：服务 -->
<template>
  <div class="page_service">
    <navTitle title="服务中心" background="linear-gradient(#dfb345, #ebdb88, #ebdb88)" />
    <van-tabs @change="tabCLick">
      <van-tab v-for="(item, index) in gridList" :name="item.id" :key="item.id" :title="item.label"></van-tab>
    </van-tabs>
    <div class="page_service-container">
      <div class="">
          <div v-for="(object, i) in list" :key="object.id">
            <div class="van-tab-item-title">{{ object.label }}</div>
            <div class="van-tab-item-content">
              <van-grid column-num="4" clickable :border="false" style="width: 100%">
                <van-grid-item use-slot v-for="(obj, _index) in object.children" :key="obj.id">
                  <img :src="obj.icon" alt="" />
                  <div class="item-title" :style="{transform: obj.label.length>5?'scale(0.9)':''}">{{ obj.label }}</div>
                </van-grid-item>
              </van-grid>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      gridList: [
        {id: 1, label: '养老服务', children: [
          {
            id: 101, label: '养老服务', children: [
              {id: 10101, label: '养老资格认证', icon: require('../../../../../static/images/1.png'), path: ''},
              {id: 10102, label: '养老金测算', icon: require('../../../../../static/images/2.png'), path: ''},
              {id: 10103, label: '高龄老人津贴查询', icon: require('../../../../../static/images/3.png'), path: ''},
              {id: 10104, label: '养老待遇资格查询', icon: require('../../../../../static/images/4.png'), path: ''},
              {id: 10105, label: '养老关系机构转移', icon: require('../../../../../static/images/5.png'), path: ''},
            ]
          },
          {
            id: 102, label: '居家养老', children: [
              {id: 10201, label: '助餐服务', icon: require('../../../../../static/images/6.png'), path: ''},
              {id: 10202, label: '助洁服务', icon: require('../../../../../static/images/7.png'), path: ''},
              {id: 10203, label: '家政服务', icon: require('../../../../../static/images/8.png'), path: ''},
              {id: 10204, label: '代购代办', icon: require('../../../../../static/images/9.png'), path: ''}
            ]
          },
          {
            id: 103, label: '医疗养老', children: [
              {id: 10301, label: '健康咨询', icon: require('../../../../../static/images/10.png'), path: ''},
              {id: 10302, label: '助医服务', icon: require('../../../../../static/images/11.png'), path: ''},
              {id: 10303, label: '疾病预防', icon: require('../../../../../static/images/12.png'), path: ''},
              {id: 10304, label: '疾病预防', icon: require('../../../../../static/images/13.png'), path: ''},
              {id: 10305, label: '心理疏导', icon: require('../../../../../static/images/14.png'), path: ''}
            ]
          },
          {
            id: 104, label: '康复养老', children: [
              {id: 10401, label: '康复护理', icon: require('../../../../../static/images/15.png'), path: ''},
              {id: 10402, label: '康复训练', icon: require('../../../../../static/images/16.png'), path: ''},
              {id: 10403, label: '养老护具', icon: require('../../../../../static/images/17.png'), path: ''}
            ]
          },
          {
            id: 105, label: '安全养老', children: [
              {id: 10501, label: '居家安全检查', icon: require('../../../../../static/images/18.png'), path: ''},
              {id: 10502, label: '紧急救援', icon: require('../../../../../static/images/19.png'), path: ''},
              {id: 10503, label: '防范诈骗', icon: require('../../../../../static/images/20.png'), path: ''}
            ]
          },
          {
            id: 106, label: '文化养老', children: [
              {id: 10601, label: '娱乐活动', icon: require('../../../../../static/images/21.png'), path: ''},
              {id: 10602, label: '教育培训', icon: require('../../../../../static/images/22.png'), path: ''}
            ]
          }
        ]},
        {id: 2, label: '幸福食堂', children: [
          {id: 201, label: '用户', children: [
            {id: 20101, label: '网点查询', icon: require('../../../../../static/images/23.png'), path: ''},
            {id: 20102, label: '网上订餐', icon: require('../../../../../static/images/24.png'), path: ''},
            {id: 20103, label: '充值服务', icon: require('../../../../../static/images/25.png'), path: ''},
            {id: 20104, label: '健康档案', icon: require('../../../../../static/images/26.png'), path: ''},
            {id: 20105, label: '意见投诉', icon: require('../../../../../static/images/27.png'), path: ''},
            {id: 20106, label: '补助申请', icon: require('../../../../../static/images/28.png'), path: ''},
          ]},
          // {id: 202, label: '养老金', children: [
          //   {id: 20201, label: '养老资格认证', icon: require('../../../static/images/index/grid1.png'), path: ''},
          //   {id: 20201, label: '养老待遇资格查询', icon: require('../../../static/images/index/grid1.png'), path: ''},
          //   {id: 20201, label: '养老金测算', icon: require('../../../static/images/index/grid1.png'), path: ''},
          //   {id: 20201, label: '高龄老人津贴查询', icon: require('../../../static/images/index/grid1.png'), path: ''},
          // ]},
        ]},
        // {id: 3, label: '其他', children: [
        //   {id: 301, label: '其他', children: [
        //     {id: 30101, label: '家庭成员', icon: require('../../../static/images/index/grid1.png'), path: ''},
        //     {id: 30102, label: '意见反馈', icon: require('../../../static/images/index/grid1.png'), path: ''},
        //     {id: 30103, label: '技术支持', icon: require('../../../static/images/index/grid1.png'), path: ''},
        //   ]}
        // ]}
      ],
      list: []
    }
  },
  onLoad() {
    setTimeout(() => {
      this.list = this.gridList[0].children;
    }, 1000);
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || {};
    },
  },
  methods: {
    handleClick(obj) {
      
    },
    tabCLick({mp}) {
      console.log(mp);
      const {detail} = mp;
      this.list = this.gridList[detail.index].children;
      console.log(this.list);
    }
  },
  onShareAppMessage() {
    return {
      title: '智慧养老',
      path: '/pages/auth/main',
      from: "menu" 
    }
  },
}
</script>

<style scoped lang="scss">
.page_service {
  height: 100vh;
  display: flex;
  flex-direction: column;
  ._van-tabs {
    height: 60px;
    flex-shrink: 0;
  }
  .page_service-container {
    padding: 0 24rpx 24rpx;
    height: 100%;
    overflow: auto;
    img {
      width: 64rpx;
      height: 64rpx;
    }
    .van-tab-item-title {
      padding-left: 24rpx;
      padding-top: 24rpx;
      font-size: 32rpx;
    }
    .item-title {
      width: 80px;
      text-align: center;
      padding-top: 24rpx;
      font-size: 24rpx;
    }
  }
}

</style>
